import store from "../store/index"
import Com3 from "@com/Com"
import './App.scss'
import React, { Component, PureComponent, ReactElement, ReactNode, Suspense } from "react"
import { logRenderTime } from "@util/log-time"
import { CSSTransition, SwitchTransition, TransitionGroup } from "react-transition-group"
import { EnterHandler } from "react-transition-group/Transition"
import { NavigateFunction, useNavigate } from "react-router-dom"
import { useSelector, useDispatch, shallowEqual } from "react-redux"
import { incAction, decAction } from "../store/reducer"
import axios from "axios"
import { flushSync } from "react-dom"
import initValue, { fetchData, getData } from "./index"

function Item() {
  const [arr, setArr] = useState([1, 2, 3, 4])
  return (
    <div>
      <TransitionGroup component="ul">
        {
          arr.map((item, index) => (
            // 不需要 in 来触发动画的显示隐藏了
            <CSSTransition key={index} classNames="num" timeout={1000}>
              <li>{item}</li>
            </CSSTransition>
          ))
        }
      </TransitionGroup>
      <button onClick={() => { setArr([...arr, arr[arr.length - 1] + 1]) }}>add</button>
      <button onClick={() => { setArr([...arr, arr[arr.length - 1] + 1]) }}>remove</button>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Item />
    </div >
  )
}

export default App
